{% extends 'base.html' %}{% load i18n %}
{% block add_js %}
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ MAPS_API_KEY }}" type="text/javascript"></script>
	<script src="/media/js/jquery-1.2.1.js" type="text/javascript"></script>
	<script src="/media/js/jquery.jmap2.js" type="text/javascript"></script>
{% endblock add_js %}
{% block title %}{{ event }}{% endblock title %}
{% block main_content %}
<div class="vcalendar">
<div class="vevent">
	<h1 class="summary">{{ event.title }}</h2>
	<p>{{ event.description }}</p>
	<p>{% trans "Location:" %} <span class="location">{{ event.place }}, {{ event.street }}, {{ event.city }}, {{ event.country }}</span></p>
	<p><abbr class="dtstart" title="{{ event.start_date }}">{{ event.start_date|date:"F, j" }}</abbr> &mdash; <abbr class="dtend" title="{{ event.end_date }}">{{ event.end_date|date:"F, j" }}</abbr></p>
</div>
</div>
    <div id="gmap"></div>
	<div id="gdirections" style="width: 500px; height: 600px"></div>
	<script type="text/javascript">
		(function($){
			marker = { 
				pointLat:{{ event.lat }},
				pointLng:{{ event.lng }},
				isDraggable:false,
				pointHTML:'<h3>{{ event.place }}</h3><p>{{ event.street }}, {{ event.city }}, {{ event.country }}</p>'
			}
			$('#gmap').jmap({mapCenter:[marker.pointLat,marker.pointLng],mapShowOverview:false}).createMarkerManager().createGeoCache().addMarker(marker);
		})(jQuery);
	</script>	
{% endblock main_content %}
